import { Button, Input } from "antd";
import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { selectCount, increment, decrement, incrementByAmount, incrementAsync } from "./counterSlice";

function Counter() {
  const count = useSelector(selectCount)
  const dispatch = useDispatch()
  const [incrementAmount, setIncrementAmount] = useState('2')


  return (
    <div>
      <div>
        <Button onClick={() => dispatch(increment())}>+</Button>
        <span>{count}</span>
        <Button onClick={() => dispatch(decrement())}>-</Button>
      </div>

      <div>
        <Input value={incrementAmount} onChange={e => setIncrementAmount(e.target.value)}></Input>
        <Button onClick={() => dispatch(incrementByAmount(Number(incrementAmount) || 0))}>Add Amount</Button>
        <Button onClick={() => dispatch(incrementAsync(Number(incrementAmount) || 0))}>Add Async</Button>
      </div>
    </div>
  )
}

export default Counter